<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:composition template="/template/template.xhtml">

	<ui:define name="conteudo">
		<p:growl autoUpdate="true" life="3000" showDetail="false" />
		<p:growl id="msg" autoUpdate="true" life="3000" showDetail="false" />
		<div class="row-fluid">
			<center>
				<h:form>
				<p:commandButton value="ALL"
							actionListener="#{produtosIndexBean.index}"
							ajax="false" update="@(form:visualizar)" />
					<ui:repeat value="#{produtosIndexBean.listaCatalog}" var="catalogo" update="prod">

						<p:commandButton value="#{catalogo.name}"
							actionListener="#{produtosIndexBean.exibirProdutosPorCatalogo(catalogo.id)}"
							ajax="false" update="@(form:visualizar)" />

					</ui:repeat>
				</h:form>
			</center>
		</div>

		<div class="row-fluid" style="width: 800;">
			<h:form id="visualizar">
				<p:dataGrid var="produto"
					value="#{produtosIndexBean.listaProdutosSelecionados}" columns="1"
					layout="grid" rows="12" paginator="true" id="prod"
					paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
					rowsPerPageTemplate="6,12,16">


					<div class="row-fluid" style="margin-left: 50px; margin-top: 2px">
						<div class="span2">
							<img class="pictures" src="img/#{produto.picture}.jpg"
								style="border-radius: 10px; border: solid 1px; width: 150px; height: 150px" />
						</div>
						<div class="span4">

							<strong><h:outputText value="Product: " /></strong>
							<h:outputText value="#{produto.name}" />
							<br /> <strong><h:outputText value="Description: " /></strong>
							<h:outputText value="#{produto.description}" />
							<br /> <strong><h:outputText value="Catalog: " /></strong>
							<h:outputText value="#{produto.catalog.name}" />
							<br /> <strong><h:outputText value="Manufacture: " /></strong>
							<h:outputText value="#{produto.manufacture}" />
							<br />
							<div class="linha">
								<strong><h:outputText value="Color: "
										rendered="#{produto.color != null}" /></strong>
								<h:outputText value="#{produto.color}" />
							</div>

							<div class="linha">
								<strong><h:outputText value="Size: "
										rendered="#{produto.size != null}" /></strong>
								<h:outputText value="#{produto.size}" />
							</div>

							<strong><h:outputText value="Value R$: " /></strong>
							<h:outputText value="#{produto.price}" />

						</div>
						<div class="span6">
							<h:outputText value="Buy It Now! Limited Time Offer." />
							<br />
							<p:commandButton value="Add To Shopping Cart" update="@(msg)"
								action="#{sessionBean.adicionarNoCarrinho(produto)}"
								icon="ui-icon-add" ajax="false" />

						</div>
						<hr />
					</div>
					<div class="row-fuid">
						<hr />
					</div>

				</p:dataGrid>
			</h:form>
		</div>
	</ui:define>
</ui:composition>
</html>